<template>
	<view>
		<searchNav @customevent="handleEvent"></searchNav>
		<view class="category-page">
			<view class="category-conter">
				<view>
					<u-tabs
						:current="indexTaba"
						:list="list1"
						:inactiveStyle="inactiveStyle"
						:activeStyle="activeStyle"
						:lineColor="'#ff3738'"
						:itemStyle="itemStyle"
						@click="clicktabs"
					></u-tabs>
				</view>
			</view>
			<view class="productSort_con">
				<u-list @scrolltolower="scrolltolower" height="510px">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="productSort_block">
							<view class="title">
								<view class="line-clamp1">{{ item.title }}</view>
								<view class="w-50 h-50 ml-30">
									<!-- <image  src="@/static/imgs/naozhong.png" mode=""></image> -->
								</view>
							</view>
							<view style="width: 100%; border: 0.5px solid #eeeeee"></view>
							<view class="content">
								<view class="content-cente">
									<view class="lettext2">
										{{ (item.avgRate*365 ).toFixed(2)}}
										<text style="font-size: 13px">%</text>
									</view>
									<!-- <view class="lettext">年利率</view> -->
									<view class="lettext">{{$t("category.c9")}}</view>
								</view>
								<view class="content-cente">
									<view class="lettext2">
										{{ item.days }}
										<text style="font-size: 13px">{{$t("category.c10")}}</text>
									</view>
									<view class="lettext">{{$t("category.c11")}}</view>
								</view>
								<view class="content-cente">
									<view class="lettext2">
										{{ item.limitMin }} U
										<text style="font-size: 13px"></text>
									</view>
									<view class="lettext">{{$t("category.c12")}}</view>
								</view>
							</view>
							<view style="width: 100%; border: 0.5px solid #eeeeee"></view>

							<view style="display: flex; align-items: center; margin-top: 10px; padding: 0px">
								<u-line-progress
									:showText="false"
									:activeColor="'rgb(255, 37, 0)'"
									:inactiveColor="'rgb(243, 240, 246)'"
									:percentage="item.process"
									height="6"
								></u-line-progress>
								<text style="font-size: 12px; color: rgb(102, 102, 102); margin-left: 10px">{{ item.process }}%</text>
							</view>
							<view class="register_submit" @click="$Router.push({ path: '/pages/category/detail', query: { id: item.id } })">{{$t("category.c13")}}</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>

		<FooterNav :modelKey="2" />
	</view>
</template>
<script>
import FooterNav from '@/components/footer-nav/footer-nav.vue';
import searchNav from './components/searchNav.vue';
import { financiallist, typeList } from '@/api/index.js';

export default {
	components: {
		FooterNav,
		searchNav
	},
	props: {},
	data() {
		return {
			itemStyle: {
				height: '34px'
			},
			inactiveStyle: {
				color: '#646566',
				fontSize: '13px',
				fontWeight: '600'
			},
			activeStyle: {
				color: '#000',
				fontSize: '14px',
				fontWeight: '600'
			},
			indexTaba: 0,
			indexList: [],
			pageNum: 1, //：当前页码
			pageSize: 10, //：每页的数据条数。
			hasMore: true, // 是否还有更多数据
			loading: false, // 加载状态
			total: 100,
			list1: [
				{ code: '1', name: this.$t('category.c6'), id: 1 },
				{ code: '0', name: this.$t('category.c7'), id: 2 },
				{ code: '2', name: this.$t('category.c8'), id: 3 }
			]
		};
	},
	watch: {},
	computed: {},
	mounted() {
		this.$nextTick(() => {
			// 确保 DOM 渲染完成后再调用相关方法
			this.$refs.tabs && this.$refs.tabs.setScrollLeft();
		});
	},
	onShow() {
		this.gettypeList();
	},
	methods: {
		//搜索方法
		handleEvent(payload) {
			// 接收子组件传递的参数
			console.log('子组件传递的参数:', payload);
			this.indexList = [];
			this.pageNum = 1;
			this.pageSize = 10;
			this.indexTaba = 0;
			this.init(payload);

		},
		async gettypeList() {
			let res = await typeList();
			this.list1 = [{ code: '', name: this.$t('category.c1') }, ...res.data];
			this.init();
			// this.list1 = res.data;
		},
		async init(payload) {
			// this.indexList = res.rows;
			// if (this.indexList.length >= this.total) return; // 避免重复加载或无数据时加载
			if (this.loading) return; // 避免重复加载或无数据时加载
			this.loading = true; // 设置加载状态
			let obj = {
				title:payload,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				classify: this.list1[this.indexTaba].code
			};
			try {
				// 模拟接口请求
				const response = await financiallist(obj);
				// this.indexList = res.rows;
				this.total = response.total;
				const data = response.rows || {};
				const items = data || []; // 获取新数据
				this.indexList = [...this.indexList, ...items]; // 合并新数据到列表
				this.pageNum++; // 页码自增
			} catch (error) {
				console.error('数据加载失败:', error);
			} finally {
				this.loading = false; // 加载完成
			}
		},
		clicktabs(e) {
			this.indexTaba = e.index;
			this.indexList = [];
			this.pageNum = 1;
			this.pageSize = 10;
			this.init();
		},
		scrolltolower() {
			this.init();
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background: rgb(245, 245, 248);
}
.category-page {
	padding: 0px 12px;
	padding-top: 120rpx;

	// /deep/.u-tabs__wrapper__nav__line{
	// 	min-width: 15%;
	// 	top: 28px;
	// 	transform: translateX(35px) translateX(-50%) !important;
	// }
	// /deep/.u-tabs__wrapper__nav__item{
	// 	    min-width: 20%;
	// 		position: relative;

	// }
}
.productSort_con {
	background: rgb(245, 245, 248);
	border-radius: 10px;
	height: 510px;
	overflow: hidden;
	.register_submit {
		width: 50%;
		margin: 0 auto;
		height: 45px;
		background: linear-gradient(90deg, #ff6241, #ff6241, #ff3738);
		border-radius: 30px;
		margin-top: 10px;
		text-align: center;
		line-height: 45px;
		color: #fff;
		border: 0 solid;
		font-size: 15px;
		font-weight: 700;
	}
	.productSort_block {
		padding: 7px 10px 10px;
		background: rgb(255, 255, 255);
		position: relative;
		width: 100%;
		margin-bottom: 10px;
		border-radius: 10px;
		border-bottom: 0 solid #eee;
		.title {
			font-size: 14px;
			font-weight: 500;
			color: rgb(51, 51, 51);
			padding: 0px;
			margin-top: 5px;
			display: flex;
			align-items: center;
			.line-clamp1 {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				flex: 1 1 0%;
			}
			.line-img {
				border: 0px solid rgb(255, 37, 0);
				color: rgb(255, 37, 0);
				padding: 1px 5px;
				border-radius: 3px;
				margin-left: 10px;
				font-size: 10px;
			}
		}
		.content {
			border-radius: 6px;
			display: flex;
			// align-items: center;
			height: 80px;
			padding-top: 10px;
			justify-content: space-between;

			.content-left,
			.content-cente {
				text-align: left;
				font-size: 14px;
				.lettext {
					color: rgb(102, 102, 102);
				}
				.lettext2 {
					font-size: 16px;
					color: rgb(0, 0, 0);
					margin-top: 6px;
					font-weight: bold;
				}
			}
			.content-cente {
				text-align: center;
				.lettext2 {
					font-size: 18px;
					color: rgb(255, 37, 0);
					font-weight: bold;
					line-height: 25px;
				}
			}
			.content-right {
				text-align: right;
				.lettext {
					font-size: 16px;
					color: rgb(102, 102, 102);
				}
				.lettext2 {
					font-size: 16px;
					color: rgb(102, 102, 102);
					margin-top: 0px;
					display: flex;
					align-items: center;
					height: 25px;
				}
				.lettext3 {
					color: rgb(102, 102, 102);
					font-size: 10px;
					margin-top: 6px;
					display: flex;
					align-items: center;
				}
			}
		}
		.dayaTIM {
			font-size: 22px;
			color: rgb(0, 0, 0);
			font-weight: bold;
			line-height: 25px;
			text-align: left;
		}
	}
}
</style>
